<template>
	<view class="page cp" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="船票预订" backUrl="/pages/index/index"></c-nav-bar>
		<view class="lb bg" :style="{'top':mt+'px'}">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="height: 481rpx;">
				<swiper-item class="swiper-items" v-for="item,index in lbList " @tap="toLbDetails(item.route)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="box">
			<view class="tab">
				<view :class="tabIndex===0?'t_active':''" @tap="changeTab(0)">
					<text>单程</text>
					<image class="limg" src="@/static/index/steamerTicket/img_left_bg.png" v-if="tabIndex===0"
						mode=""></image>
				</view>
				<view :class="tabIndex===1?'t_active':''" @tap="changeTab(1)">
					<text>往返</text>
					<image class="rimg" src="@/static/index/steamerTicket/img_right_bg.png" v-if="tabIndex===1"
						mode=""></image>
				</view>
			</view>
			<view class="content">
				<view class="address">
					<view>
						<text @tap="toSelectPlace(1)">{{departurePlace}}</text>
					</view>
					<view>
						<text style="text-align: right;" @tap="toSelectPlace(1)">{{arrivalPlace}}</text>
					</view>
					<image src="https://i.ringzle.com/file/20240220/367523690a7c4838abad991d6d99266e.png"
						@tap="changeFromTo"></image>
				</view>
				<view class="line1"></view>
				<view class="date" v-if="tabIndex===0">
					<view class="vd" @tap="toSelectSingleDate">
						<view>
							<text>{{departDate}}</text>
							<text>{{departWeek}}</text>
						</view>
						<image src="@/static/my/commonInformation/icon_yjt.png" mode=""></image>
					</view>
				</view>
				<view class="date2" v-else>
					<view>
						<view class="vd" @tap="toSelectSingleDate">
							<view>
								<text>{{departDate}}</text>
								<text>{{departWeek}}</text>
							</view>
							<image src="@/static/my/commonInformation/icon_yjt.png" mode=""></image>
						</view>
					</view>
					<view>
						<view class="vd" @tap="toSelectSingleDate">
							<view>
								<text>{{returnDate}}</text>
								<text>{{returnWeek}}</text>
							</view>
							<image src="@/static/my/commonInformation/icon_yjt.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="line2"></view>
				<view class="type">
					<u-radio-group @change="selectType" size="32" iconSize="24" v-model="dataList.trafficType"
						placement="row" activeColor='#007A69'>
						<u-radio labelSize='30' label="旅客" :name='1'></u-radio>
						<u-radio labelSize='30' label="车辆及随车人员" :name='2' v-if="tabIndex==0"></u-radio>
					</u-radio-group>
				</view>
				<view class="submit" @tap="toQuery">
					查询
					<image src="https://i.ringzle.com/file/20240226/20c4861eb1fb422ca8fce687fe78c699.png"></image>
				</view>
			</view>
		</view>
		<view class="items2">
			<view class="i_pre" @tap="toMrcq">
				<image src="https://i.ringzle.com/file/20240220/da4719f2626c4ba7addc581bce8e38f9.png"></image>
				<text>每日船期</text>
			</view>
			<view class="i_pre">
				<image src="https://i.ringzle.com/file/20240220/3f7c59fdf262446589441a8c1e891fd9.png"></image>
				<button @tap="openCustomerServiceChat">船票咨询</button>
			</view>
		</view>
		<view class="v-calendar">
			<u-calendar title="选择日期" color="#007A69" :maxDate="maxDate" :defaultDate="defaultDate"
				confirmDisabledText="确定" :formatter="formatter" :show="singleShow" :mode="singleMode"
				@confirm="singleConfirm" @close="closeDate" ref="calendar" :isTip="true" :closeOnClickOverlay="true">
			</u-calendar>
		</view>
		<u-popup :show="phoneShow" @close="phoneShow=false">
			<view class="p_box">
				<view class="pb_title">拨打电话</view>
				<view class="pb_item" v-for="(item,index) in phoneList" :key="index" @tap="callPhone(item.phone)">
					<view>{{item.title}}<text>{{item.phone}}</text></view>
				</view>
				<view class="pb_qx" @tap="phoneShow=false">取消</view>
			</view>
		</u-popup>

		<u-popup :show="cpzxShow" @close="cpzxShow=false" mode="center">
			<view class="cpzx_box">
				<view class="cb_close">
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="cpzxShow=false"></image>
				</view>
				<view class="cb_code">
					<image :show-menu-by-longpress="true"
						src="https://i.ringzle.com/file/20240612/a87125e461324662b81f58be32ec3003.png"></image>
				</view>
				<view class="cb_texts">
					<view class="cbt_top">
						<view>长按图片<br>识别二维码</view>
						<view>添加客服<br>[游嵊泗]</view>
					</view>
					<view class="cbt_tip">
						关于旅行中的问题，可以向<br>
						我提问，与您一对一服务～
					</view>
				</view>
				<image class="cb_hi" src="https://i.ringzle.com/file/20240112/761cc0fbd5954ec594c113ccea1359b7.png">
				</image>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		name: 'steamerTicketIndex',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				lbList: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240730/d1ccd9e25d6347aab97e6f17141aaa8b.png'
				}],
				tabIndex: 0,
				typeIndex: 1,
				departurePlace: '嵊泗(沈家湾)',
				departureCode: '1028',
				arrivalPlace: '嵊泗(泗礁)',
				arrivalCode: '1010',
				departDate: '',
				departWeek: '',
				returnDate: '',
				returnWeek: '',
				maxDate: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				list: [{
						img: '@/static/my/my_cp.png',
						title: '每日船期',
						path: '/pages/touristMap/sailingSchedule'
					},
					{
						img: 'https://i.ringzle.com/file/20231121/e289764abd1346b6adc05f04979553a9.png',
						title: '船票咨询',
						path: ''
					},
					{
						img: 'https://i.ringzle.com/file/20240110/51cbf3f4174e46629b3d86b5a1519e52.jpg',
						title: '购票须知',
						path: '/pagesIndex/steamerTicket/ticketingInstructions'
					}
				],
				singleShow: false,
				singleMode: 'single',
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				startDate: '',
				endDate: '',
				maxQueryDayNum: '',
				canQueryStart: '',
				canQueryEnd: '',
				phoneShow: false,
				phoneList: [{
						title: '客服电话：',
						phone: '0580-5591234转9'
					},
					{
						title: '李柱山站：',
						phone: '0580-5078323'
					},
					{
						title: '沈家湾站：',
						phone: '0580-5298323'
					},
					{
						title: '小菜园站：',
						phone: '0580-5070342'
					},
					{
						title: '枸杞站：',
						phone: '0580-5211020'
					},
					{
						title: '嵊山站：',
						phone: '0580-5021659'
					},
					{
						title: '大洋站：',
						phone: '0580-5057013'
					}
				],
				cpzxShow: false,
				dataList: {
					queryDate: "",
					trafficType: 1,
					startSpot: {
						id: null,
						type: 1,
						name: ""
					},
					endSpot: {
						id: null,
						type: 2,
						name: ""
					}
				},
			}
		},
		onReady() {
			uni.removeStorageSync('shipType');
			// 初始化
			this.departDate = new Date().Format('MM月dd日');

			this.departWeek = this.week[new Date().getDay()];

			let mt = new Date().setDate(new Date().getDate() + 1);
			this.returnDate = new Date(mt).Format('MM月dd日');

			this.returnWeek = this.week[new Date(mt).getDay()];

			this.startDate = new Date().Format('yyyy-MM-dd');
			this.endDate = new Date(mt).Format('yyyy-MM-dd');
			this.getMaxDate();
			this.getLbList();
		},
		onShow() {
			// this.tabIndex = 0;
			// this.typeIndex = 1;
			// this.singleMode = 'single';
			// this.defaultDate = null;
			// uni.removeStorageSync('shipType');
		},
		onLoad() {
			this.$refs.calendar.setFormatter(this.formatter);
			// if(uni.getStorageSync('ship_wxts')) return
			// uni.showModal({
			// 	title: '船票预约提醒',
			// 	content: '由于海岛航班受天气等不可抗力因素影响较大，请旅客预留足够转乘接驳时间并妥善安排行程，密切关注天气动态及航班动态，以免影响行程安排，不便之处，敬请谅解。',
			// 	showCancel: false,
			// 	confirmText: '确定',
			// 	confirmColor: '#01B9F9'
			// })
			// uni.setStorageSync('ship_wxts',true);
		},
		methods: {
			openCustomerServiceChat: function() {
			    wx.openCustomerServiceChat({
			      extInfo: {url: 'https://work.weixin.qq.com/kfid/kfcbdf9c7a445d4d1dd'},
			      corpId: 'ww127277f75261ec6e', // 替换为你的企业ID
			      success(res) {
			        console.log('成功打开客服聊天界面');
			      },
			      fail(err) {
			        console.log('打开客服聊天界面失败', err);
			      }
			    });
			},
			toLbDetails(url) {
				console.log(url);
				if (!url) return
				if (uni.getStorageSync('spid_old')) uni.removeStorageSync('spid_old');
				if (uni.getStorageSync('price_old')) uni.removeStorageSync('price_old');
				uni.navigateTo({
					url: url
				})
			},



			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/4').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}

						});
						if (list.length > 0) this.lbList = list;
					}
				})
			},
			//交换出发和到达港口
			changeFromTo() {
				let dtemp = JSON.parse(JSON.stringify(this.departurePlace));
				let dtempcode = JSON.parse(JSON.stringify(this.departureCode));
				let atemp = JSON.parse(JSON.stringify(this.arrivalPlace));
				let atempcode = JSON.parse(JSON.stringify(this.arrivalCode));
				this.departurePlace = atemp;
				this.departureCode = atempcode;
				this.arrivalPlace = dtemp;
				this.arrivalCode = dtempcode;
			},
			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							this.maxQueryDayNum = res.data.data.list[0].wysts;
							this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+this
								.maxQueryDayNum))).Format('yyyy-MM-dd');
							this.canQueryStart = res.data.data.list[0].wtimeS;
							this.canQueryEnd = res.data.data.list[0].wtimeE;
							uni.setStorageSync('maxQueryDayNum', this.maxQueryDayNum);
						}
					} else this.$showModal(res.data.msg);
				})
			},
			changeTab(index) {
				this.tabIndex = index;
				this.dataList.trafficType = 1;
				// this.typeIndex = 1;
				if (this.tabIndex === 0) {
					this.singleMode = 'single';
					this.defaultDate = null;
					this.list = [{
							img: '@/static/my/my_cp.png',
							title: '每日船期',
							path: '/pages/touristMap/sailingSchedule'
						},
						{
							img: 'https://i.ringzle.com/file/20231121/e289764abd1346b6adc05f04979553a9.png',
							title: '船票咨询',
							path: ''
						},
						{
							img: 'https://i.ringzle.com/file/20240110/51cbf3f4174e46629b3d86b5a1519e52.jpg',
							title: '购票须知',
							path: '/pagesIndex/steamerTicket/ticketingInstructions'
						}
					];

				} else {
					this.singleMode = 'range';
					this.defaultDate = [];
					uni.setStorageSync('shipType', 1);
					this.endDate = new Date(new Date().setDate(new Date(this.startDate).getDate() + 1)).Format(
						'yyyy-MM-dd');
					this.returnDate = new Date(new Date().setDate(new Date(this.startDate).getDate() + 1)).Format(
						'MM月dd日');
					this.returnWeek = this.week[new Date(this.endDate).getDay()];
					this.list = [{
							img: '@/static/my/my_jdms.png',
							title: '酒店民宿',
							path: '/pagesTrip/hotel/index'
						},
						{
							img: '@/static/my/my_cp.png',
							title: '船票+住宿',
							path: '/pagesIndex/steamerTicketStay/index'
						},
						{
							img: 'https://i.ringzle.com/file/20231121/e289764abd1346b6adc05f04979553a9.png',
							title: '船票咨询',
							path: ''
						},
						{
							img: 'https://i.ringzle.com/file/20240110/51cbf3f4174e46629b3d86b5a1519e52.jpg',
							title: '购票须知',
							path: '/pagesIndex/steamerTicket/ticketingInstructions'
						}
					];
				}
			},
			selectType(type) {
				this.typeIndex = type;
				uni.setStorageSync('shipType', type);
			},
			//选择地点
			toSelectPlace(type) {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/selectShipRoute?type=' + type,
					events: {
						selectedShip: data => {
							this.departurePlace = data.from;
							this.departureCode = data.fromCode;
							this.arrivalPlace = data.to;
							this.arrivalCode = data.toCode;
						}
					}
				})
			},
			toQuery() {
				if (this.canQueryStart && this.canQueryEnd) {
					let ts = new Date(new Date().Format('yyyy-MM-dd') + ' ' + this.canQueryStart + ':00').getTime();
					let te = new Date(new Date().Format('yyyy-MM-dd') + ' ' + this.canQueryEnd + ':00').getTime();
					let tn = new Date().getTime();
					if (ts - tn > 0 || tn - te > 0) return this.$showToast('请在' + this.canQueryStart + '~' + this
						.canQueryEnd + '内进行查询');
				}

				let query = {
					startPortNo: this.departureCode,
					endPortNo: this.arrivalCode,
					startDate: this.startDate,
					pzlx: this.typeIndex - 1
				};

				if (this.tabIndex === 1) {
					query.from = this.departurePlace;
					query.to = this.arrivalPlace;
					query.goWeek = this.departWeek;
					query.backWeek = this.returnWeek;
					query.endDate = this.endDate;
					query.pzlx = 0;
					return uni.navigateTo({
						url: '/pagesIndex/steamerTicket/arriveDepart?item=' + JSON.stringify(query)
					})
				} else {
					query.from = this.departurePlace;
					query.to = this.arrivalPlace;
					uni.navigateTo({
						url: '/pagesIndex/steamerTicket/selectFlight?item=' + JSON.stringify(query)
					})
				}
			},
			toSelectSingleDate() {
				this.singleShow = true;
			},
			singleConfirm(e) {
				if (this.tabIndex === 1) {
					if (e.length == 0) return this.$showToast('请选择开始日期');
					if (e.length == 1) return this.$showToast('请选择结束日期');
				}

				this.singleShow = false;
				if (this.tabIndex === 0) {
					this.departDate = new Date(e[0]).Format('MM月dd日');
					this.departWeek = this.week[new Date(e[0]).getDay()];
					this.startDate = new Date(e[0]).Format('yyyy-MM-dd');
				} else {
					this.departDate = new Date(e[0]).Format('MM月dd日');

					this.departWeek = this.week[new Date(e[0]).getDay()];

					this.returnDate = new Date(e[e.length - 1]).Format('MM月dd日');

					this.returnWeek = this.week[new Date(e[e.length - 1]).getDay()];

					this.startDate = new Date(e[0]).Format('yyyy-MM-dd');
					this.endDate = new Date(e[e.length - 1]).Format('yyyy-MM-dd');
				}
			},
			closeDate() {
				this.singleShow = false;
			},
			formatter(day) {
				if (uni.getStorageSync('maxQueryDayNum')) {
					for (let i = 0; i <= +uni.getStorageSync('maxQueryDayNum'); i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			toTurn(item) {
				if (!item.path) {
					return this.phoneShow = true;
				}
				uni.navigateTo({
					url: item.path
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			toMrcq() {
				uni.navigateTo({
					url: '/pages/touristMap/sailingSchedule'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;

		.bg {
			width: 100%;
			height: 481rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.box {
			width: calc(100% - 48rpx);
			margin: 331rpx 0 0 24rpx;
			border-radius: 24rpx;
			position: relative;
			z-index: 3;

			.tab {
				width: 100%;
				height: 90rpx;
				background: rgba(255, 255, 255, .88);
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				display: flex;
				align-items: center;

				&>view {
					width: 50%;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					position: relative;

					&.t_active::after {
						content: '';
						position: absolute;
						width: 128rpx;
						height: 6rpx;
						background: #007A69;
						border-radius: 2rpx;
						left: 50%;
						margin-left: -64rpx;
						top: 84rpx;
						z-index: 1;
					}

					text {
						position: relative;
						z-index: 2;
					}

					image {
						width: calc(100% + 53rpx);
						height: 100rpx;
						position: absolute;
						bottom: 0;
						z-index: 0;

						&.limg {
							left: 0;
						}

						&.rimg {
							right: 0;
						}
					}
				}
			}

			.content {
				padding: 0 30rpx 48rpx;
				background: #fff;
				border-bottom-left-radius: 24rpx;
				border-bottom-right-radius: 24rpx;
				overflow: hidden;

				.address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					margin-top: 75rpx;

					&>view {
						display: flex;
						flex-direction: column;

						text {
							&:first-child {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #808080;
								line-height: 24rpx;
							}

							&:last-child {
								font-size: 36rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 36rpx;
							}
						}
					}

					image {
						width: 64rpx;
						height: 64rpx;
						position: absolute;
						top: 50%;
						margin-top: -32rpx;
						left: 50%;
						margin-left: -32rpx;
					}
				}

				.line1 {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin: 34rpx 0 35rpx;
				}

				.date {
					display: flex;
					flex-direction: column;

					&>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 24rpx;
					}

					.vd {
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							text {
								font-size: 36rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #1C1E41;
								line-height: 40rpx;

								&:last-child {
									margin-left: 24rpx;
									font-size: 30rpx;
									color: #666666;
									line-height: 40rpx;
								}
							}
						}

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.date2 {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 24rpx;
					}

					.vd {
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							text {
								font-size: 36rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: bold;
								color: #1C1E41;
								line-height: 40rpx;

								&:last-child {
									margin-left: 24rpx;
									font-size: 30rpx;
									color: #666666;
									line-height: 40rpx;
								}
							}
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin: 8rpx 0 0 20rpx;
						}
					}
				}

				.line2 {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin: 35rpx 0 34rpx;
				}

				.type {
					display: flex;
					align-items: center;
					padding-bottom: 37rpx;
					border-bottom: 1rpx solid #EFEFEF;

					text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 37rpx;
					}

					view {
						width: calc((100% - 190rpx) / 2);
						height: 68rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 12rpx;
						line-height: 68rpx;
						text-align: center;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #A3A3A3;
						margin-left: 36rpx;
					}

					.ty_active {
						border: 1rpx solid #007A69;
						color: #007A69;
					}
				}

				.submit {
					width: 100%;
					height: 88rpx;
					// background: linear-gradient(90deg, #FF7D43 0%, #FFA414 100%);

					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-top: 47rpx;
					background-color: #007A69;
					position: relative;

					image {
						width: 96rpx;
						height: 60rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}

		.items {
			padding: 127rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 24rpx;
					margin-top: 24rpx;
				}
			}
		}

		.items2 {
			width: 100%;
			display: flex;
			position: fixed;
			bottom: 64rpx;

			&>view {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #5A607C;
					margin-left: 16rpx;
				}
			}

			.i_pre {
				button {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #5A607C;
					padding: 0;
					margin: 0 0 0 16rpx;

					&::after {
						width: 0 !important;
						height: 0 !important;
					}
				}
			}
		}

		.p_box {
			.pb_title {
				width: 100%;
				padding: 46rpx 0 30rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				border-bottom: 1rpx solid #F5F7F8;
			}

			.pb_item {
				border-bottom: 1rpx solid #F5F7F8;
				padding: 30rpx 0;
				width: calc(100% - 56rpx);
				margin: 0 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;

				text {
					color: #188FFE;
				}
			}

			.pb_qx {
				width: 100%;
				border-top: 19rpx solid #F5F7F8;
				padding: 29rpx 0 99rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
		}

		/deep/.u-popup__content,
		.p_box {
			// border-radius: 32rpx 32rpx 0 0;
			border-radius: 32rpx;
		}

		/deep/.u-popup__content {
			width: calc(100% - 142rpx);
		}

		/deep/.v-calendar {
			.u-popup__content {
				width: 100% !important;
			}

			.u-icon__icon {
				font-size: 28rpx !important;
			}
		}

		/deep/.cpzx_box {
			width: 100%;
			padding: 36rpx 40rpx 64rpx 30rpx;
			box-sizing: border-box;
			border-radius: 32rpx;
			position: relative;

			.cb_close {
				width: 100%;
				display: flex;
				justify-content: flex-end;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.cb_code {
				width: 100%;
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 280rpx;
					height: 280rpx;
				}
			}

			.cb_texts {
				margin-top: 107rpx;

				.cbt_top {
					display: flex;
					align-items: center;

					&>view {
						font-size: 24rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #025EA7;
						line-height: 33rpx;
						position: relative;

						&:last-child {
							margin-left: 20rpx;
							padding-left: 20rpx;

							&::before {
								content: '';
								width: 1rpx;
								height: 52rpx;
								background: #025EA7;
								position: absolute;
								top: 50%;
								margin-top: -26rpx;
								left: 0;
							}
						}
					}
				}

				.cbt_tip {
					margin-top: 20rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #111111;
					line-height: 42rpx;
				}
			}

			.cb_hi {
				width: 269rpx;
				height: 304rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 0;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
<style>
	.cp .u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-radio__text {
		margin-right: 80rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>